<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>博客详情</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
		<link href="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/skin/layer.css" rel="stylesheet">
		<link href="static/css/typo.css" rel="stylesheet" />
		<link href="static/css/animate.css" rel="stylesheet" />
		<link href="static/lib/prism/prism.css" rel="stylesheet" />
		<link href="static/lib/tocbot/tocbot.css" rel="stylesheet" />
		<link href="static/css/index.css" rel="stylesheet" />
	</head>

	<body>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：导航
        -->
		<div id="head"></div>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：内容
        -->
		<div class="i-padded-tb-big i-container-small animated fadeIn" id="waypoint">
			<div class="ui container">
				<!--头部-->
				<div class="ui top attached segment">
					<div class="ui mini horizontal link list">
						<div class="item">
							<img alt="" class="ui avatar image" id='avatar' />
							<div class="content">
								<a href="#" class="header" id='nickName'></a>
							</div>
						</div>
						<div class="item">
							<i class="calendar icon" id='createTime'></i>
						</div>
						<div class="item">
							<i class="eye icon" id='views'></i>
						</div>
					</div>
				</div>
				<!--图片区域-->
				<div class="ui attached  segment">
					<img class="ui fluid rounded image" id='firstPicture'>
				</div>
				<!--内容-->
				<div class="ui  attached padded segment">
					<div class="ui right aligned basic segment">
						<div class="ui basic orange label" id='flag'></div>
					</div>
					<h2 class="ui center aligned header" id='title'></h2>
					<div id="content" class="typo js-toc-content  typo-selection js-toc-content i-padded-lr-responsive i-padded-tb-large">

					</div>
					<!--标签-->
					<div class="i-padded-lr-responsive">
						<div class="ui basic teal left pointing label" id='tagName'></div>
					</div>
					<!--赞赏-->
					<div class="ui center aligned basic segment">
						<button id="payButton" class="ui orange basic circular button">赞赏</button>
					</div>
					<div class="ui payQR popup flowing transition hidden">
						<div class="ui orange basic label">
							<div class="ui images" style="font-size: inherit;">
								<div class="image">
									<img src="static/img/wechat.jpg" class="ui rounded bordered image" style="width: 120px;" />
									<div>支付宝</div>
								</div>
								<div class="image">
									<img src="static/img/wechat.jpg" class="ui rounded bordered image" style="width: 120px;" />
									<div>微信</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--博客信息-->
				<div class="ui attached positive message">
					<div class="ui middle aligned grid">
						<div class="eleven wide column">
							<div class="list">
								<li id='author'></li>
								<li id='publishTime'></li>
								<li id="reprintAddr">原文地址:<a></a></li>
								<li id="github"><a>github</a></li>
								<li id="mayun"><a>码云</a></li>
								<li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
								<li>公众号转载：请在文末添加作者公众号二维码</li>
							</div>
						</div>
						<div class="five wide column">
							<img src="" class="ui right floated rounded bordered image" style="width: 110px;" id="authorQRCode"/>
						</div>
					</div>
				</div>
				<!--留言区域-->
				<div id="comment-container" class="ui attached segment">
					<div class="ui teal segment">
						<div class="ui comments">
							<h3 class="ui dividing header" id='commentHead'>Comments</h3>
	<!--						<div class="comment">
								<a class="avatar">
									<img src="https://unsplash.it/100/100?image=1005">
								</a>
								<div class="content">
									<a class="author">Matt</a>
									<div class="metadata">
										<span class="date">Today at 5:42PM</span>
									</div>
									<div class="text">
										How artistic!
									</div>
									<div class="actions">
										<a class="reply">Reply</a>
									</div>
								</div>
							</div>
							<div class="comment">
								<a class="avatar">
									<img src="https://unsplash.it/100/100?image=1005">
								</a>
								<div class="content">
									<a class="author">Elliot Fu</a>
									<div class="metadata">
										<span class="date">Yesterday at 12:30AM</span>
									</div>
									<div class="text">
										<p>This has been very useful for my research. Thanks as well!</p>
									</div>
									<div class="actions">
										<a class="reply">Reply</a>
									</div>
								</div>
								<div class="comments">
									<div class="comment">
										<a class="avatar">
											<img src="https://unsplash.it/100/100?image=1005">
										</a>
										<div class="content">
											<a class="author">Jenny Hess</a>
											<div class="metadata">
												<span class="date">Just now</span>
											</div>
											<div class="text">
												Elliot you are always so right :)
											</div>
											<div class="actions">
												<a class="reply">Reply</a>
											</div>
										</div>
										<div class="comments">
									<div class="comment">
										<a class="avatar">
											<img src="https://unsplash.it/100/100?image=1005">
										</a>
										<div class="content">
											<a class="author">Jenny Hess</a>
											<div class="metadata">
												<span class="date">Just now</span>
											</div>
											<div class="text">
												Elliot you are always so right :)
											</div>
											<div class="actions">
												<a class="reply">Reply</a>
											</div>
										</div>
									</div>
								</div>
									</div>
								</div>
								
							</div>
							<div class="comment">
								<a class="avatar">
									<img src="https://unsplash.it/100/100?image=1005">
								</a>
								<div class="content">
									<a class="author">Joe Henderson</a>
									<div class="metadata">
										<span class="date">5 days ago</span>
									</div>
									<div class="text">
										Dude, this is awesome. Thanks so much
									</div>
									<div class="actions">
										<a class="reply">Reply</a>
									</div>
								</div>
							</div>-->
							
							
						</div>
					</div>
					<div class="ui form" id='commentArea'>
						<div class="field">
							<textarea name="content" placeholder="请输入评论信息..."></textarea>
						</div>
						<div class="fields">
							<div class="field i-mobile-wide i-margin-bottom-small">
								<div class="ui left icon input">
									<i class="user icon"></i>
									<input type="text" name="nickname" placeholder="姓名" />
								</div>
							</div>
							<div class="field i-mobile-wide i-margin-bottom-small">
								<div class="ui left icon input">
									<i class="mail icon"></i>
									<input type="text" name="email" placeholder="邮箱" />
								</div>
							</div>
							<div class="field i-mobile-wide i-margin-bottom-small">
								<button class="ui teal button i-mobile-wide" id="publish-btn"><i class="edit icon"></i>发布</button>
							</div>
							<div class="field i-mobile-wide i-margin-bottom-small">
								<button class="ui teal button i-mobile-wide" id="reset-btn"><i class="reply icon"></i>复位</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="i-fixed i-right-bottom i-padded " id="toolbar" style="display: none;">
			<div class="ui vertical icon buttons">
				<button class="ui toc-button teal button" type="button">目录</button>
				<a href="#comment-container" class="ui teal button">留言</a>
				<button class="ui  wechat icon button "><i class="weixin icon"></i></button>
				<div id="toTop-button" href="#" class="ui  button icon"><i class="chevron up icon"></i></div>
			</div>
		</div>
		<div class="ui toc-container popup flowing transition hidden" style="width: 250px !important;">
			<ol class="js-toc">

			</ol>
		</div>
		<div id="qrcode" class="ui wechat_qr flowing popup transition hidden" style="width: 130px;">
			<!--				<img class="ui rounded image" src="static/img/wechat.jpg" style="width: 120px;" />
--></div>

		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：footer
        -->
		<div id='foot'></div>

	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
	<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
	<script src="static/js/function.js"></script>
	<script src="static/lib/prism/prism.js"></script>
	<script src="static/lib/tocbot/tocbot.min.js"></script>
	<script src="static/lib/qrcode/qrcode.min.js"></script>
	<script src="static/lib/waypoints/jquery.waypoints.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

	<script>
		$('.menu.toggle').click(function() {
			$('.i-item').toggleClass('i-mobile-hide');
		});

		$('#payButton').popup({
			popup: $('.payQR.popup'),
			on: 'click',
			position: 'bottom center'
		});

		$(".toc-button").popup({
			popup: $('.toc-container'),
			on: 'click',
			position: 'left center'
		})

		tocbot.init({
			toSelector: '.js-toc',
			contentSelector: '.js-toc-content',
			headingSelector: 'h1,h2,h3'
		});

		$(".wechat").popup({
			popup: $(".wechat_qr"),
			position: "left center"
		})

		/**
		 * 前端生成二维码
		 */
		var qrcode = new QRCode("qrcode", {
			text: "http://jindo.dev.naver.com/collie",
			width: 110,
			height: 110,
			colorDart: "#000000",
			colorLight: "#ffffff",
			correctLevel: QRCode.CorrectLevel.H
		})

		/**
		 * 平缓滚动
		 */
		$('#toTop-button').click(function() {
			$(window).scrollTo(0, 500);
		})

		/**
		 * 滚动检测
		 */
		var waypoint = new Waypoint({
			element: document.getElementById('waypoint'),
			handler: function(direction) {
				if(direction == 'down') {
					$("#toolbar").show();
				} else {
					$("#toolbar").hide();
				}
			}
		});
		var blogId = '';
		$(function() {
			$('#head').load('common/head.html');
			$('#foot').load('common.foot.html');
			blogId = getQueryVariable('id');
			blogInit();
			commentsInit();
		})
		/**
		 * 博客数据初始化
		 */
		function blogInit() {
			$.ajax({
				url: urlPath + '/index/api/getBlogDetails',
				type: 'post',
				data: {
					blogId: blogId
				},
				success: function(res) {
					if(res.code == 200) {
						var blog = res.data;
						$('#nickName').text(blog.nickName);
						$('#createTime').after(blog.createTime);
						$('#views').after(blog.views);
						var flag = blog.flag;
						switch(flag) {
							case '0':
								flag = '原创';
								break;
							case '1':
								flag = '转载';
								break;
							case '2':
								flag = '翻译';
								break;
						}
						$('#flag').text(flag);
						$('#title').text(blog.title);
						$('#tagName').text(blog.tagName);
						$('#content').append(blog.contentHtml);
						$('#author').text('作者:' + blog.reprintFrom);
						$('#publishTime').text('发表时间:' + blog.createTime);
						$('#reprintAddr a').attr('href',blog.reprintAddr);
						$('#reprintAddr a').text(blog.reprintAddr);
						if(blog.github != '' && blog.github != null){
							$('#github a').attr('href',blog.github);
						}else{
							$('#github').hide();
						}
						if(blog.mayun != '' && blog.mayun != null){
							$('#mayun a').attr('href',blog.mayun);
						}else{
							$('#mayun').hide();
						}
						if(blog.qrcode != '' && blog.qrcode != null){
							$('#authorQRCode').attr('src',blog.qrcode);
						}else{
							$('#authorQRCode').attr('src',"static/img/unknow.jpg");
						}
						var picture = blog.firstPicture;
						if(picture == null && blog.files != null) {
							picture = blogs.files[0].fileAddr;
						}
						$('#firstPicture').attr('src', picture);
						$('#avatar').attr('src', blog.avatar);
						if(blog.commentabled) {
							$('#commentArea').show();
						} else {
							$('#commentArea').hide();
						}
					}
				}
			})
		}
		var parentCommentId="";
		//评论信息初始化
		function commentsInit() {
			$.ajax({
				url: urlPath + '/index/api/getComments',
				type: 'post',
				data: {
					blogId: blogId
				},
				success: function(res) {
					if(res.code == 200) {
						var commentsData = res.data;
						console.info(commentsData);
						var commentHead = $('#commentHead');
						var html = "";
						for(var i=0;i<commentsData.length;i++){
							//如果是根评论
							if(commentsData[i].adminComment){
								if(commentsData[i].replyComments.length<0){
									html+='<div class="comment">'+
									  	  '<a class="avatar">'+
									    	 '<img src='+commentsData[i].avatar+'>'+
									      '</a>'+
									      '<div class="content">'+
									      	'<a class="autohor">'+commentsData[i].nickname+'</a>'+
									      	'<div class="metadata">'+
									      		'<span class="date">'+commentsData[i].createTime+'</span>'+
									      	'</div>'+
									      	'<div class="text">'+commentsData[i].content+'</div>'+
									      	'<div class="actions" commentId = '+commentsData[i].id+'>'+
									      		'<a class="reply">回复</a>'+
									      	'</div>'+
									      '</div>'+
									    '</div>';
								}else{
									//有回复则循环调用,直到没有回复为止
									html+='<div class="comment">'+
									  	  '<a class="avatar">'+
									    	 '<img src='+commentsData[i].avatar+'>'+
									      '</a>'+
									      '<div class="content">'+
									      	'<a class="autohor">'+commentsData[i].nickname+'</a>'+
									      	'<div class="metadata">'+
									      		'<span class="date">'+commentsData[i].createTime+'</span>'+
									      	'</div>'+
									      	'<div class="text">'+commentsData[i].content+'</div>'+
									      	'<div class="actions" commentId = '+commentsData[i].id+'>'+
									      		'<a class="reply">回复</a>'+
									      	'</div>'+
									      '</div>';
//									    commentRepeat(commentsData[i],html);
									html+='<div class="comments">';
										for(var j=0;j<commentsData[i].replyComments.length;j++){
											html+='<div class="comment">'+
										  	  '<a class="avatar">'+
										    	 '<img src='+commentsData[i].replyComments[j].avatar+'>'+
										      '</a>'+
										      '<div class="content">'+
										      	'<a class="autohor">'+commentsData[i].replyComments[j].nickname+'</a>'+
										      	'<div class="metadata">'+
										      		'<span class="date">'+commentsData[i].replyComments[j].createTime+'</span>'+
										      	'</div>'+
										      	'<div class="text">'+commentsData[i].replyComments[j].content+'</div>'+
										      	'<div class="actions" commentId = '+commentsData[i].replyComments[j].id+'>'+
										      		'<a class="reply" >回复</a>'+
										      	'</div>'+
										      '</div>'+
										    '</div>';
										}
									html+='</div>'+'</div>';
								}
							}else{
								if(commentsData[i].replyComments.length>0){
									html+='<div class="comment">'+
									  	  '<a class="avatar">'+
									    	 '<img src='+commentsData[i].avatar+'>'+
									      '</a>'+
									      '<div class="content">'+
									      	'<a class="autohor">'+commentsData[i].nickname+'</a>'+
									      	'<div class="metadata">'+
									      		'<span class="date">'+commentsData[i].createTime+'</span>'+
									      	'</div>'+
									      	'<div class="text">'+commentsData[i].content+'</div>'+
									      	'<div class="actions" commentId = '+commentsData[i].id+'>'+
									      		'<a class="reply" >回复</a>'+
									      	'</div>'+
									      '</div>';
									    
									html+='<div class="comments">';
										for(var j=0;j<commentsData[i].replyComments.length;j++){
											html+='<div class="comment">'+
										  	  '<a class="avatar">'+
										    	 '<img src='+commentsData[i].replyComments[j].avatar+'>'+
										      '</a>'+
										      '<div class="content">'+
										      	'<a class="autohor">'+commentsData[i].replyComments[j].nickname+'</a>'+
										      	'<div class="metadata">'+
										      		'<span class="date">'+commentsData[i].replyComments[j].createTime+'</span>'+
										      	'</div>'+
										      	'<div class="text">'+commentsData[i].replyComments[j].content+'</div>'+
										      	'<div class="actions"  commentId = '+commentsData[i].replyComments[j].id+'>'+
										      		'<a class="reply">回复</a>'+
										      	'</div>'+
										      '</div>'+
										    '</div>';
										}
									html+='</div>'+'</div>';
								}
							}
						}
						commentHead.after(html);
 					}
				}
			})
		}
		//迭代回复赞未实现,后续更新
/*		function commentRepeat(commentsData,html){
				if(commentsData.replyComments.length>0){
						html+='<div class="comments">';
							for(var j=0;j<commentsData.replyComments.length;j++){
								html+='<div class="comment">'+
									'<a class="avatar">'+
										'<img src='+commentsData.replyComments[j].avatar+'>'+
									'</a>'+
										      '<div class="content">'+
										      	'<a class="autohor">'+commentsData.replyComments[j].nickname+'</a>'+
										      	'<div class="metadata">'+
										      		'<span class="date">'+commentsData.replyComments[j].createTime+'</span>'+
										      	'</div>'+
										      	'<div class="text">'+commentsData.replyComments[j].content+'</div>'+
										      	'<div class="actions">'+
										      		'<a class="reply">回复</a>'+
										      	'</div>'+
										      '</div>'+
										    '</div>';
									commentRepeat(commentsData.replyComments[j],html);	    
								 }
									
				}
				else{
					html+='</div>'+'</div>';
				}
				
		}*/
		
		
		$('body').on('click','.reply',function(){
			$('body .actions .reply').css('color','');
			parentCommentId = $(this).parent().attr('commentId')
			$(this).css('color','blue');
		})
		
		
		$('#publish-btn').on('click',function(){
			var keyMap={};
			keyMap.content = $('textArea[name="content"]').val();
			keyMap.nickName = $('input[name="nickname"]').val();
			keyMap.email = $('input[name="email"]').val();
			keyMap.avatar = randomAvatar[Random(0,10)];
			if(parentCommentId == ""){
				keyMap.adminComment=1;
			}else{
				keyMap.adminComment=0;
				keyMap.parentCommentId = parentCommentId;
			}
			keyMap.blogId = blogId;
			$.ajax({
				url:urlPath+"/index/api/saveComment",
				type:'post',
				data:keyMap,
				success:function(res){
					if(res.code=200){
						propSuccess(res,function(){
							//此处暂时是页面刷新,可以改为静态刷新
							window.location.reload()
						});
//						var data = res.data;
//						if(data.adminComment){
//							
//						}
					}else{
						propFailReload(res,function(){
							
						})
					}
				}
			})
		})
		
		$('#reset-btn').on('click',function(){
			$('textArea[name="content"]').val("");
			$('input[name="nickname"]').val("");
			$('input[name="email"]').val("");
			$('body .actions .reply').css('color','');
			parentCommentId = 0;
		})
		
		
	</script>

</html>